<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>复杂选择器</title>
        <style type="text/css">
            /* selector list */
            .odd,
            .even {
                margin: 10px;
                border: 1px solid blue;
            }

            .odd>*,
            .even>* {
                border: 1px solid red;
            }

            div.odd > span.tian {
                background-color: #ff0;
            }
        </style>
    </head>
    <body>
        <h3>复杂选择器(complex selector)</h3>
        <p>
            A <b>complex selector</b> is a sequence of one or more <b>compound selectors</b> separated by combinators. 
        </p>
        <section>
            复杂选择器 是由 组合符(combinator) 分隔 的一个或多个 复合选择器(compound selector) 的序列。
        </section>


        <div class="odd">
            <span class="tian">天字一号</span>
            <b class="tian">天字二号</b>
            <span class="di">地字一号</span>
            <b class="di">地字二号</b>
        </div>
        
        <div class="even">我是来打酱油的，不是来睡觉的</div>
        
        <p class="odd">
            <span class="first">天字一号</span>
            <b class="second">天字二号</b>
            <span class="third">地字一号</span>
            <b class="fourth">地字二号</b>
        </p>
            
        <p class="even">我是来打酱油的，不是来睡觉的</p>

        <main>
    </body>
</html>